<template>
  <basic-container >
    <el-page-header @back="goBack" >
      <template slot="content">
        <span>{{queryParams.customName}}账单</span>
      </template>
    </el-page-header>
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="账单信息" name="first">
        <!--<user-order-info ref="realData" :orderInfoList="orderInfoList"></user-order-info>-->
        <div>
          <el-table  :data="orderInfoList"  >
            <el-table-column label="订单号" align="center" prop="orderInfoCode" show-overflow-tooltip />
            <el-table-column label="支付状态" align="center" prop="orderInfoStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_info_status" :value="scope.row.orderInfoStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="客户编号" align="center" prop="customName" />
            <el-table-column label="开始时间" align="center" prop="startTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="endTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="总电费" align="center" prop="totalElecMoney" />
            <el-table-column label="总服务费" align="center" prop="totalSeviceMoney" />
            <el-table-column label="总金额" align="center" prop="totalMoney" />
            <el-table-column label="订单状态" align="center" prop="orderStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus" />
              </template>
            </el-table-column>
            <el-table-column label="结束方式" align="center" prop="stopReason">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.stop_reason" :value="scope.row.stopReason"/>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getOrderInfoList" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>

<script>
  import { listOrderInfo} from "@/api/smart/custom/orderInfo";
  import UserOrderInfo from "@/views/smart/custom/user/userOrderInfo";
  export default {
  name: "viewCustomOrderInfo",
  dicts: ['stop_reason', 'payment_method', 'order_info_status','order_status'],
  components:{UserOrderInfo},
  data(){
    return{
      activeName:'first',
      // 用户订单表格数据
      orderInfoList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customCode:null,
        customName:null,
      },
    }
  },
  created() {
    this.$nextTick(() =>{
      this.queryParams.customName = this.$route.query.customName;
      this.queryParams.customCode = this.$route.query.customCode;
      this.getOrderInfoList();
    })
  },
  methods:{
    /** 查询用户订单列表 */
    getOrderInfoList() {
      listOrderInfo(this.queryParams).then(response => {
        this.orderInfoList = response.rows;
        this.total = response.total;
      });
    },
    goBack(){
      this.$router.go(-1)
    },
    handleClick(){
      if(this.activeName==='first'){
      }
      if(this.activeName==='second'){
      }
    }
  }
}
</script>
